<template>
  <div class="msg-item">
    <img :src="userSrc"/>
    <div @click="showDetail">
      <span>{{position}}</span><br/>
      <span>{{name}}</span>
      <span v-bind:class="[hasUnread?'unread':'total']">{{number}}</span>
    </div>
  </div>
</template>

<script>
const responseData = {
  position: '学委',
  name: '陈静虹',
  pic: '../../static/userlogo.jpg',
  unread: 0,
  total: 10
}
export default {
  name: 'msgItem',
  data: function () {
    return {
      position: responseData.position,
      name: responseData.name,
      number: responseData.unread === 0 ? responseData.total : responseData.unread,
      total: responseData.total,
      userSrc: responseData.pic,
      hasUnread: responseData.unread !== 0
    }
  },
  methods: {
    showDetail: function () {
      console.log('click')
      this.$emit('showDetail')
    }
  }
}
</script>

<style scoped>
.msg-item img {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid black;
    border-radius: 50%;
    margin: 0.47rem;
}
.msg-item div {
    display: inline-block;
    width: 50%;
    height: 1.65rem;
    border-radius: 0.2rem;
    vertical-align: top;
    margin: 0.24rem;
    padding: 0.35rem;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
    background-color: white;
}
.msg-item div span {
    display: inline-block;
}
.msg-item div span:nth-child(1) {
    font-size: 0.5rem;
    font-weight: bold;
    height: 0.94rem;
}
.msg-item div span:nth-child(3) {
    width: 70%;
    height: 1rem;
    font-size: 0.4rem;
}
.msg-item div span:nth-child(4) {
    width: 1rem;
    height: 0.7rem;
    text-align: center;
    line-height: 0.7rem;
    border-radius: 5px;
    position: relative;
    top: -0.87rem;
    color: white;
    font-size: 0.45rem;
}
.unread {
    background-color: red;
}
.total {
    background-color: #bdbdbd;
}
</style>
